<template>
	<view id="companyIP">
		<Header txt="代理IP定制" v-if="baidu"></Header>
		<HeaderB txt="代理IP定制" v-if="!baidu"></HeaderB>
		<view class="bg_fff">
			<view class="getapi_top">
			  <text class="getapi_tit">代理IP定制</text>
			  <text class="getapi_tit02">联系人信息</text>
			</view>
		</view>
		<view class="content contentself"> 
			<view class="item">
				<text class="icon">*</text>
				<text>企业名称</text>
				<view class="input">
					<input class="inputT" type="text" value="" v-model="ruleForm.companyName" @focus="input(1)" @blur="blur(1)" placeholder="请输入企业名称"/>
					<view class="inputBl">
						<input class="inputB" type="text" v-model="text1" value="" disabled/>
					</view>
				</view>
			</view>
			<view class="item">
				<text class="icon">*</text>
				<text>姓名</text>
				<view class="input">
					<input type="text" class="inputT" value="" v-model="ruleForm.contactsName" @focus="input(2)" @blur="blur(2)" placeholder="请输入姓名"/>
					<view class="inputBl">
						<input class="inputB" type="text" v-model="text2" value="" disabled/>
					</view>
				</view>
			</view>
			<view class="item">
				<text class="icon">*</text>
				<text>联系方式</text>
				<view class="input">
					<input type="text" class="inputT" value="" v-model="ruleForm.contactsMobile" @focus="input(3)" @blur="blur(3)" placeholder="请输入手机号"/>
					<view class="inputBl">
						<input class="inputB" type="text" v-model="text3" value="" disabled/>
					</view>
				</view>
			</view>
		</view>
		<view class="content2">
			<view class="content">
				<view class="num_xin02">需求信息</view>
				<view class="item2">
					<view class="block">提取频率</view>
					<view class="block blockR">
						<view class="block reduce blockY" v-if="isShow1" @click="reduce(1)">—</view>
						<view class="block reduce" v-if="!isShow1">—</view>
						<view class="block blockC">
							<input class="inputC" type="number" value="" v-model="ruleForm.maxFrequency" @input="inputN" />
						</view>
						<view class="block add" @click="add(1)">+</view>
					</view>
				</view>
				<view class="item2">
					<view class="block">单次提取数量</view>
					<view class="block blockR">
						<view class="block reduce blockY" v-if="isShow2"  @click="reduce(2)">—</view>
						<view class="block reduce"  v-if="!isShow2">—</view>
						<view class="block blockC">
							<input class="inputC" type="number" value="" v-model="ruleForm.maxPickNum" @input="inputN" />
						</view>
						<view class="block add" @click="add(2)">+</view>
					</view>
				</view>
				<view class="item2">
					<view class="block">每日总量</view>
					<view class="block blockR">
						<view class="block reduce blockY" v-if="isShow3" @click="reduce(3)">—</view>
						<view class="block reduce " v-if="!isShow3">—</view>
						<view class="block blockC">
							<input class="inputC" type="number" value="" v-model="ruleForm.dayTimes" @input="inputN" />
						</view>
						<view class="block add" @click="add(3)">+</view>
					</view>
				</view>
				<view class="item2 item3">
					<textarea value="" rows="1" v-model="ruleForm.detail" maxlength="100" placeholder="请输入您的需求"  />
				</view>
				<span style="color: #999999">*请您尽可能详细地描述需求或反馈的内容哦~</span>
				<view class="btn">
					<button type="primary"  @click="submitForm()">提交需求</button>
				</view>
			</view>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
			        companyName: "",
			        contactsName: "",
			        contactsMobile: "",
			        detail: "",
			        maxFrequency: 0,
			        maxPickNum: 1,
			        dayTimes: 0,
			        type: 1,
			    },
				text1:'',
				text2:'',
				text3:'',
				isShow1:false,
				isShow2:false,
				isShow3:false,
				baidu:true
			}		
		},
		onShow(){
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		methods: {
			submitForm(){
				let that=this
				// console.log(1,this.ruleForm);
				var data = that.ruleForm;
				that.$store
					.dispatch("CompanyBusinessSave",data)
					.then((response) => {
						let data=response.data
						if (data.code == "0") {
						   uni.showModal({
						       title: '提交成功',
						       content: '我们在确认您的信息后，将在1个工作日内联系您，谢谢您对熊猫代理的信任与支持！',
						       success: function (res) {
						       }
						   });
						}else{
							uni.showModal({
							    title: '提交失败',
							    content: data.msg,
							    success: function (res) {
							    }
							});
						}        
					})
			},
			input(e) {
				
			},
			inputN(){
				this.isShow()	
			},
			isShow(){
				if(this.ruleForm.maxFrequency<=0){
					this.isShow1=false
				}else{
					this.isShow1=true
				}
				if(this.ruleForm.maxPickNum<=1){
					this.isShow2=false
				}else{
					this.isShow2=true
				}
				if(this.ruleForm.dayTimes<=0){
					this.isShow3=false
				}else{
					this.isShow3=true
				}
			},
			reduce(e){
				if(e==1){
					this.ruleForm.maxFrequency-=1
				}else if(e==2){
					this.ruleForm.maxPickNum-=1
				}else if(e==3){
					this.ruleForm.dayTimes-=10000
				}
				this.isShow()			
			},
			add(e){
				if(e==1){
					this.ruleForm.maxFrequency+=1
				}else if(e==2){
					this.ruleForm.maxPickNum+=1
				}else if(e==3){
					this.ruleForm.dayTimes+=10000
				}
				this.isShow()
			},
			blur(e){
				if(e==1){
					if(this.ruleForm.companyName==""){
						this.text1="请输入企业名称"
					}else if(this.ruleForm.companyName.length<=2){
						this.text1="至少3个字符"
					}else{
						this.text1=""
					}
				}else if(e==2){
					if(this.ruleForm.contactsName==""){
						this.text2="请输入姓名"
					}else if(this.ruleForm.contactsName.length<2){
						this.text2="至少2个字符"
					}else{
						this.text2=""
					}
				}else if(e==3){
					if(this.ruleForm.contactsMobile==""){
						this.text3="请输入手机号"
					}else if(!/^1[3456789]\d{9}$/.test(this.ruleForm.contactsMobile)){
						this.text3="请输入正确的手机号码"
					}else{
						this.text3=""
					}
				}
			}
		},
	}
</script>

<style lang="less">
#companyIP{
	background-color: #fff;
	.bg_fff{
		background-color: #fff;
	}
	.getapi_top {
	  padding-top: 44rpx;
	  padding-left: 30rpx;
	}
	.getapi_tit {
	  font-size: 40rpx;
	  color: #222222;
	  font-weight: bold;
	}
	.getapi_tit02 {
	  font-size: 20rpx;
	  color: #818181;
	  padding-left: 15rpx;
	}
	.num_xin02 {
	  font-size: 40rpx;
	  color: #222222;
	  font-weight: bold;
	  margin-bottom: 30rpx;
	}
	.content{
		width: 90%;
		margin: 0 auto;
	}
	.contentself{
		background-color: #fff;
		padding-bottom: 20rpx;
	}
	.content2{
	    background-color: #f7f8fa;
		padding: 20rpx 0 100rpx;
	}
	.item2{
		height: 52rpx;
	    padding: 10px 16px;
	    overflow: hidden;
	    color: #323233;
	    font-size: 14px;
	    line-height: 24px;
	    background-color: #fff;	
		margin-bottom: 30rpx;
	}
	.item3{
		height: auto;
		min-height: 100rpx;
	}
	.block{
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
		height: 100%;
		.inputC{
			width: 100rpx;
			height: 38rpx !important;
			// background: #00D6B2;
			text-align: center;
			vertical-align: middle;
		}
	}
	.blockC{
		margin: 0 10rpx;
	}
	.blockR{
		float: right;
	}
	.reduce,.add{
	    width: 52rpx;
	    height: 52rpx;
		text-align: center;
		border-radius: 50px;
		color: #c8c9cc;
	    background-color: #f7f8fa;
	    cursor: not-allowed;	
		font-weight: bold;
	}
	.add{
		background-color: #4078ef;
		color: #fff;
	}
	.blockY{
		color: #323233;
		background-color: #f2f3f5;
	}
	.item{
		text{
			font-size: 28rpx;
		    color: #606266;
		    line-height: 80rpx;
		    padding: 0 24rpx 0 0;	
		}
		.inputBl{
			height: 40rpx;
		}
		.inputT{
			width: 100%;
			border-radius: 0;
			background-color: #f5f5f5;
			border: none;  
		    box-sizing: border-box;
		    color: #606266;
		    font-size: inherit;
		    height: 80rpx;
		    line-height: 80rpx;
		    outline: 0;
		    padding: 0 30rpx;
		}
		.inputB{
		    color: #F56C6C;
		    font-size: 24rpx;
		    line-height: 1;
		    padding-top: 8rpx;
		    // position: absolute;
		    // top: 100%;
		    // left: 0;	
		}
		.icon{
		    color: #ff4200;
			padding: 0;
		}
	}
	.btn{
		button{
			background: #007AFF;
		}
	}
}
</style>
